import Vue from "vue"

import VueRouter from "vue-router"
//引入视图组件
// import my from "../pages/My"
// import friend from "../pages/Friend"
// import discover from "../pages/Discover"
import toplist from "../pages/Discover/Toplist"
import playlist from "../pages/Discover/Playlist"
import djradio from "../pages/Discover/Djradio"

import List from "../pages/List"
import Detail from "../pages/Detail"
import Page404 from "../pages/Page404"
import Bottom from "../pages/Discover/Bottom"

Vue.use(VueRouter)



//配置路由注意3步

//1.创建视图组件

//2.配置routes

//3.展示组件用router-view

//选项 一个path 一个component

//用一个path映射一个component

//动态路由案例:列表页到详情页

//列表获取:http://chst.vip:1234/api/getmoneyctrl

//详情页:http://chst.vip:1234/api/getmoneyctrlproduct?productid=20

//步骤:

//1.展示列表
//2.列表到详情页,其实就是复用了一个详情页面,携带id给详情页发送请求,就能渲染了

//用户如果访问了routes以外的页面 都属于非法页面 要显示404页面

// 404页面通过通配符配置就可以了

const routes = [
    {
        path:"/",
        redirect:"/my/123"
    },
    {
        path: "*",
        component: Page404
    },
    //匹配优先级:路由的相同的路径可以匹配多个不同的组件,谁先定义就匹配谁
    {
        path: "/list",
        component: List
    },
    // {
    //     path: "/list",
    //     component: Page404
    // },
    {
        path: "/detail/:id",
        component: Detail,
        props: true //路由参数解耦合
    },
    {
        path: "/my/:name",
        //路由懒加载(页面切割),按需加载
        //作用:加快首屏的渲染速度
        component: () => import(/*webpackChunkName:'my' */"../pages/My")

    },
    {
        path: "/friend",
        component: ()=>import(/*webpackChunkName:'friend' */"../pages/Friend")
    },
    {
        path: "/discover",
        component: ()=>import(/*webpackChunkName:'discover' */"../pages/Discover"),
        //路由重定向
        redirect: "/discover/djradio",
        //配置子路由(嵌套路由)
        children: [
            {
                path: "djradio", //嵌套路由的1级路径不能加斜杠
                components: { //多视口(router-view)配置
                    default: djradio,
                    bt: Bottom
                }
            },
            {
                name: "playlist",//命名路由
                path: "playlist", //嵌套路由的1级路径不能加斜杠
                component: playlist
            },
            {
                path: "toplist", //嵌套路由的1级路径不能加斜杠
                component: toplist
            },
        ]
    }
]

export default new VueRouter({
    mode:'hash',//变更了路由的模式
    routes
})